<template>
	<div class="platConfig">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'> <i class="icon iconfont">&#xe7d8;</i>
				当前位置/系统配置/
				<span>平台管理</span>
			</div>
		</div>
		<div class="right_content">
			<div class="table" style="margin-bottom:40px;">
				<div class="platConfigTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">
						查询添加
					</span>
				</div>
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" style="width:100%">
					<div class="form-A">
						<div class="form-A-cell">
							<div class="form-A-hed">
								游戏名称
							</div>
							<div  class="form-A-hbd t1">
								<el-form-item :label-width="formLabelWidth">
									<el-select
									  v-model="region" @change='projectsChange'
									  placeholder="请选择游戏" type="success" multiple>
										<el-option
									    v-for="item in projects"
								        :label="item.label"
								        :value="item.value"></el-option>
									</el-select>
								</el-form-item>
							</div>
						</div>
						<div class="form-A-cell">
							<div class="form-A-hed">
								平台ID
							</div>
							<div  class="form-A-hbd t1">
								<el-form-item  prop="id">
									<template scope="scope">
										<el-input v-model="ruleForm.id"   placeholder="请输入平台ID"></el-input> 
									</template>
								</el-form-item>
							</div>
						</div>
						<div class="form-A-cell">
							<div class="form-A-hed">
								平台名称
							</div>
							<div class="form-A-hbd t1">
								<el-form-item prop="name">
									<template scope="scope">
										<el-input v-model="ruleForm.name"   placeholder="请输入平台名称"></el-input> 
									</template>
								</el-form-item>
							</div>
						</div>
						<div class="form-A-cell">
							<div class="form-A-hed">
								平台描述
							</div>
							<div class="form-A-hbd t1" >
								<el-form-item prop="description">
									<template scope="scope">
										<el-input v-model="ruleForm.description"   placeholder="请输入平台描述"></el-input> 
									</template>
								</el-form-item>
							</div>

						</div>
						<div class="form-A-cell">
							<div class="form-A-hed">
								操作
							</div>
							<div class="form-A-hbd" >
								<el-form-item>
									<template scope="scope">
										<el-button type="primary" @click="addForm('ruleForm', scope.row)" size="small" icon="plus">立即添加</el-button>
									</template>
								</el-form-item>
							</div>

						</div>
						
					</div>
				</el-form>
			</div>
			<div class="table">
				<div class="platConfigTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">
						结果展示
					</span>
				</div>
				<el-table
			:data="tableData"
			style="width: 100%" class="table-input" >
					<el-table-column align="center"
					  label="游戏名称">
						<template scope="scope">
							<el-tag>{{ scope.row.gameName }}</el-tag>
						</template>
					</el-table-column>
					<el-table-column align="center"
					  label="平台ID">
						<template scope="scope">
							<span>{{scope.row.id}}</span>
						</template>
					</el-table-column>
					<el-table-column align="center"
					  label="平台名称" prop="enuKey">
					  	<template scope="scope" >
							<el-input  v-model="scope.row.name" placeholder="请输入平台名称"></el-input>
						</template>
					  </el-table-column>
					<el-table-column align="center" prop="enuDesc"
					  label="平台描述">
					  	<template scope="scope">
							<el-input  v-model="scope.row.description" placeholder="请输入平台描述" ></el-input>
						</template>
					  </el-table-column>
					<el-table-column label="操作" align="center" width="300">
						<template scope="scope">
							<el-button 
					      		size="small"
					      		@click="handleEdit(scope.$index, scope.row)">修改</el-button>
							<el-button
					      		size="small"
								type="danger"
					      		@click="handleDelete(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="pages" v-if="pagesBool">
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="currentPage"
						:page-sizes="pageSizes"
						:page-size="pageSize"
						layout="total, sizes, prev, pager, next, jumper"
						:total="dataTotal">
					</el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>
<style lang="stylus" rel="stylesheet/stylus" src="./platConfig.styl"></style>
<script src="./platConfig.js"></script>